/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <sf-form ref="form"
            class="read-server__form server-config">
        <div class="form__type">
            <div class="form__title">
                <lang>基础信息</lang>
            </div>
            <sf-form-item>
                <sf-fieldlabel>
                    <lang>服务器名称</lang>
                </sf-fieldlabel>
                <div class="common-name">
                    {{ recordData.name }}
                </div>
            </sf-form-item>
            <sf-form-item>
                <sf-fieldlabel>
                    <lang>描述</lang>
                </sf-fieldlabel>
                <div class="common-name">
                    {{ recordData.description }}
                </div>
            </sf-form-item>
        </div>
        <div class="form__type">
            <div class="form__title">
                <lang>服务镜像配置</lang>
                <sf-fieldtip>
                    <lang>包含基线工具以及机器学习框架的初始启动镜像</lang>
                </sf-fieldtip>
            </div>
            <sf-form-item>
                <sf-fieldlabel class="read-server__form-lebal">
                    <lang>服务镜像名称</lang>
                </sf-fieldlabel>
                <div class="common-name ellipsis" style="width: 220px" :title="recordData.image">
                    {{ recordData.image }}
                </div>
            </sf-form-item>
        </div>
        <div class="form__type">
            <div class="form__title">
                <lang>服务资源配置</lang>
            </div>
            <sf-form-item>
                <sf-fieldlabel>
                    <lang>cpu</lang>
                </sf-fieldlabel>
                <div class="common-name">
                    {{ recordData.cpuNum }}（核）
                </div>
            </sf-form-item>
            <sf-form-item v-show="recordData.vGpuNum" class="read-server__gpu-form-item">
                <sf-fieldlabel>
                    <lang>gpu</lang>
                </sf-fieldlabel>
                <div class="common-name">
                    <div class="read-server__gpu-form-item-value">
                        <span>GPU类型：</span>
                        {{ recordData.vGpuDisplayName }}
                    </div>
                    <div class="read-server__gpu-form-item-value">
                        <span>数量：</span>
                        {{ recordData.vGpuNum }}
                    </div>
                    <div class="read-server__gpu-form-item-value">
                        <span>显存大小：</span>
                        {{ recordData.vGpuMemory }}（GB）
                    </div>
                </div>
            </sf-form-item>
            <sf-form-item>
                <sf-fieldlabel>
                    <lang>内存</lang>
                </sf-fieldlabel>
                <div class="common-name">
                    {{ recordData.memorySize }}（GB）
                </div>
            </sf-form-item>
            <sf-form-item>
                <sf-fieldlabel>
                    <lang>存储名称</lang>
                </sf-fieldlabel>
                <div class="common-name">
                    {{ recordData.volumeName }}
                </div>
            </sf-form-item>
        </div>
    </sf-form>
</template>
<script>


export default {
    props: {
        recordData: {
            type: Object,
            default: () => {}
        }
    },
    data () {
        return {
        };

    },
};
</script>

<style lang="less">
.read-server__form{
    .form__title{
        margin-bottom: 10px;
        margin-left: -8px;
        color: #14161a;
        font-weight: bold;
    }
    .flex{
        display: flex;
    }
    .gray{
        color:#adadad;
    }
    .bell{
        .icon-comp-bell{
            color: #ad6800;
        }
    }
    .sfv-form-item{
        display: flex;
        align-items: center;
            margin-bottom: 5px;
    }
    .read-server__gpu-form-item.sfv-form-item {
        align-items: normal;
    }
    .read-server__gpu-form-item-value {
        height: 32px;
        line-height: 32px;
    }
}


</style>


